<template>
   <div>
      <xdh-table  v-if="htmlTable.length" :note="note" :key="getkey()" ref="dragTable" :tableIsShow="false" :seachFrom="htmlList" :leftButton="leftButton" :rightButton="rightButton" :columns="htmlTable" :data="tableData" :empty-text='emptyText' row-key="id" border stripe  @refreshInit="refreshInit" @submitSearchForm="submitForm">
        
      </xdh-table>
       <div v-else style="margin-top:10px;padding:20px;text-align:center;border:1px solid rgba(0, 21, 41, 0.08);">没有找到模板信息</div>
   </div>
</template>
<script>
import XdhTable from '@/widgets/xdh-table'
import XdhForm from '@/widgets/xdh-form'
import XdhFormItem from '@/widgets/xdh-form/xdh-form-item'
import { getInfo } from '@/api/tpl'
import { commonGetInfo } from '@/api/common'
import { buildTree } from '@/utils/convert'
import { getTplId } from '@/utils/util'
import { mapGetters } from 'vuex'

export default {
  components: { XdhTable ,XdhForm , XdhFormItem },
  data() {
    return {
      expandAll: true,
      formData: {},
      tab_id: 0,
      ajax_url: '',
      index_url: '',
      note: '',
      htmlTable:[],
      htmlList: [],
      rightButton:[],
      leftButton:[],
      load: null,
      tableData:[],
      emptyText:'没有找到你要的内容哦！'
    }
  },
  computed: {
    ...mapGetters([
      'routerRules','routerMenu'
    ]),
  },
  mounted() {
    this.inits();
  },
  methods: {
    refreshInit(){
      this.getDatas();
    },
    async inits() {
      var tpl_id = getTplId(this.$route,this.routerMenu);
      var d = {
        id: tpl_id
      };
      const res = await getInfo(d);
      if (res && res.code === 200) {
        if(res.data.info.template_content) {
            this.index_url = res.data.info.index_url;
            this.ajax_url = res.data.info.ajax_url;
            this.note = res.data.info.note;
            this.htmlList = res.data.info.template_content.searchForm[0].content;
            this.htmlTable = res.data.info.template_content.table;
            this.leftButton = res.data.info.template_content.leftButton;
            this.rightButton = res.data.info.template_content.rightButton;
            this.getDatas();
        }
      }
    },
    async getDatas() {
      var d = Object.assign(this.$route.query,{isTree:1});
      const res = await commonGetInfo(this.index_url, d);
      if (res && res.code === 200) {
        this.tableData = res.data.list;
        // this.tableData = buildTree(res.data.list,res.data.pidNumber,res.data.idKey,res.data.pidKey);
        // console.log('tree',res.data.list);
      }   
    },
    async submitForm(formDatas) {
         //搜索
        this.listQuery.search = formDatas;
        this.getDatas();
    },
    getkey() {
      return Math.random();
    }
  }
}
</script>
